<template>
  <view class="container">
    <!-- 顶部导航栏 -->
   

    <!-- 支付结果状态 -->
    <view class="result-container">
      <view class="success-icon">
		<u-icon size="40" color="#ffffff" name="checkmark-circle-fill"></u-icon>
      </view>
      <view class="success-text">支付成功</view>
      <view class="success-desc">您已成功支付驾校报名费用</view>
    </view>

    <!-- 订单信息 -->
    <view class="order-info">
      <view class="info-title">订单信息</view>
      <view class="info-item">
        <view class="item-label">订单编号</view>
        <view class="item-value">{{ orderInfo.	order_no }}</view>
      </view>
      <view class="info-item">
        <view class="item-label">支付方式</view>
        <view class="item-value">{{ orderInfo.payment_type == 1?'微信支付':'支付宝支付' }}</view>
      </view>
      <view class="info-item">
        <view class="item-label">支付时间</view>
        <view class="item-value">{{ orderInfo.payment_time }}</view>
      </view>
      <view class="info-item">
        <view class="item-label">支付金额</view>
        <view class="item-value text-bold">¥{{ orderInfo.paid_fee }}</view>
      </view>
    </view>

    <!-- 驾校信息 -->
    <view class="school-info">
      <view class="info-title">驾校信息</view>
      <view class="school-detail">
        <image class="school-logo" :src="schoolInfo.logo" mode="aspectFit"></image>
        <view class="school-content">
          <view class="school-name">{{ schoolInfo.school_name }}</view>
          <view class="school-address">
            <text class="iconfont icon-location"></text>
            <text>{{ schoolInfo.address }}</text>
          </view>
          <view class="school-contact">
            <text class="iconfont icon-phone"></text>
            <text>{{ schoolInfo.contact_phone }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="btn-container">
      <button class="btn-primary" @click="goHome">返回首页</button>
      <button class="btn-outline" @click="viewOrderDetail">查看订单详情</button>
    </view>

    <!-- 底部提示 -->
    <view class="bottom-tip">
      <text class="iconfont icon-info-circle"></text>
      <text>工作人员将在24小时内与您联系，请保持电话畅通</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 订单信息
      orderInfo: {
        orderNumber: 'ORD2025060912345678',
        paymentMethod: '微信支付',
        paymentTime: '2025-06-09 14:30:25',
        amount: '3880.00'
      },
      // 驾校信息
      schoolInfo: {
        logo: 'https://img.51miz.com/Element/00/89/20/15/4915d0b5_E892015_2f9d89d1.png',
        name: '通达驾校',
        address: '北京市朝阳区建国路88号',
        phone: '400-123-4567'
      }
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    },
    // 返回首页
    goHome() {
      uni.switchTab({
        url: '/pages/index/index'
      })
    },
    // 查看订单详情
    viewOrderDetail() {
      uni.navigateTo({
        url: `/pagesA/order/detail?orderId=${this.orderInfo.orderNumber}`
      })
    },
	async getPayment(id){
		const res = await this.$api.get('/Payment/payDedeil',{id},true)
		if(res.data.code) {
			this.orderInfo = res.data.data.orderInfo
			this.schoolInfo = res.data.data.schoolInfo
		}
	},
  },
  onLoad(option) {
    // 页面加载时可根据订单ID获取订单详情
    // this.getOrderDetail(options.orderId)
	this.getPayment(option.id)
  }
}
</script>

<style lang="scss">
.container {
  padding-bottom: 100rpx;
  background-color: #f8f8f8;
}

// 导航栏样式
.nav-bar {
  height: 88rpx;
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 0 30rpx;
  border-bottom: 1rpx solid #eee;
  
  .nav-back {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36rpx;
  }
  
  .nav-title {
    flex: 1;
    text-align: center;
    font-size: 36rpx;
    font-weight: 500;
  }
}

// 结果展示区域
.result-container {
  padding: 60rpx 0;
  text-align: center;
  background-color: #fff;
  
  .success-icon {
    width: 120rpx;
    height: 120rpx;
    margin: 0 auto;
    background-color: #52c41a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .iconfont {
      color: #fff;
      font-size: 60rpx;
    }
  }
  
  .success-text {
    margin-top: 30rpx;
    font-size: 40rpx;
    font-weight: 500;
    color: #333;
  }
  
  .success-desc {
    margin-top: 15rpx;
    font-size: 28rpx;
    color: #666;
  }
}

// 信息区域通用样式
.order-info, .school-info {
  margin-top: 20rpx;
  background-color: #fff;
  padding: 30rpx;
  
  .info-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #eee;
  }
  
  .info-item {
    display: flex;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f5f5f5;
    
    &:last-child {
      border-bottom: none;
    }
    
    .item-label {
      width: 220rpx;
      font-size: 28rpx;
      color: #666;
    }
    
    .item-value {
      flex: 1;
      font-size: 28rpx;
      color: #333;
      text-align: right;
    }
    
    .text-bold {
      font-weight: 500;
      color: #ff4500;
    }
  }
}

// 驾校信息样式
.school-detail {
  display: flex;
  padding-top: 20rpx;
  
  .school-logo {
    width: 160rpx;
    height: 160rpx;
    border-radius: 20rpx;
  }
  
  .school-content {
    flex: 1;
    margin-left: 20rpx;
    
    .school-name {
      font-size: 32rpx;
      font-weight: 500;
      color: #333;
    }
    
    .school-address, .school-contact {
      margin-top: 10rpx;
      font-size: 26rpx;
      color: #666;
      
      .iconfont {
        margin-right: 10rpx;
      }
    }
  }
}

// 按钮样式
.btn-container {
  margin: 60rpx 30rpx 0;
  
  .btn-primary {
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    background-color: #1677ff;
    color: #fff;
    border-radius: 45rpx;
    font-size: 32rpx;
  }
  
  .btn-outline {
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    background-color: #fff;
    color: #1677ff;
    border-radius: 45rpx;
    font-size: 32rpx;
    border: 1rpx solid #1677ff;
    margin-top: 30rpx;
  }
}

// 底部提示
.bottom-tip {
  margin-top: 40rpx;
  text-align: center;
  font-size: 26rpx;
  color: #999;
  
  .iconfont {
    margin-right: 10rpx;
  }
}
</style>  